<script setup lang="ts">
import { message } from 'ant-design-vue'
import { HttpStatusCode } from 'axios'
import Request from '@/api/axios'
import { useRoute } from 'vue-router'
import { onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'
const user_id = useRoute().query.uid
const data = reactive({
    username: '',
    nickname: '',
    email: '',
    createdAt: '',
    lastlogin: '',
    birthday: '',
    rating: 1000,
    avatar: '',
    school: '',
    education: '',
    gender: '',
    submissionnum: 0,
    acceptednum: 0,
    introduction: '',
    balance: 0
})
const updateData = (Source: any) => {
    data.username = Source.username
    data.nickname = Source.nickname
    data.email = Source.email
    data.createdAt = Source.CreatedAt
    data.lastlogin = Source.UpdatedAt
    data.rating = Source.rating
    data.avatar = Source.avatar
    data.birthday = Source.birthday
    data.school = Source.school
    data.education = Source.education
    data.gender = Source.gender
    data.submissionnum = Source.submission
    data.acceptednum = Source.accept
    data.introduction = Source.introduction
    data.balance = Source.balance
}
const refreshData = async () => {
    await Request.get({ url: `/user/${user_id}` })
        .then((response: any) => {
            updateData(response.info)
        })
        .catch((err: any) => {
            message.error("出错啦")
            console.log(err)
        })
}
onMounted(refreshData)

const changeAvatar = (event) => {
    message.info('功能暂时关闭')
    return
    const formData = new FormData()
    formData.append('avatar', event.target.files[0])
    Request.post({
        url: `/user/changeAvatar`,
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
        .then((response: any) => {
            if (response.code === HttpStatusCode.Ok) {
                message.success('头像修改成功,请刷新页面')
                refreshData()

            } else {
                message.error('头像修改失败')
                console.log(response.msg)
            }
        })
        .catch((err) => {
            message.error('错误，请稍后重试')
        })
}
</script>

<template>
    <a-card title="个人信息" bordered>
        <div class="flex items-center">
            <img :src="data.avatar" alt="Avatar" class="w-20 h-20 rounded-full mr-5" />
            <div>
                <h2 class="text-2xl font-bold">{{ data.username }} {{ data.gender === "1" ? '♂' : '♀' }}
                </h2>
                <p class="text-gray-600">{{ data.first_name }} {{ data.last_name }}</p>
                <input type="file" accept=".png,.jpg,.jpeg" @change="changeAvatar($event)" />
            </div>
        </div>
        <div class="mt-5">

            <p><span class="font-bold">邮箱:</span> {{ data.email }}</p>
            <p><span class="font-bold">提交次数:</span> {{ data.submissionnum }}</p>
            <p><span class="font-bold">通过次数:</span> {{ data.acceptednum }}</p>
            <p><span class="font-bold">积分:</span> {{ data.rating }}</p>
            <p><span class="font-bold">简介:</span> {{ data.introduction }}</p>
            <p><span class="font-bold">生日:</span> {{ data.birthday }}</p>
            <p><span class="font-bold">注册时间:</span> {{ dayjs(data.createdAt).format('YYYY-MM-DD HH:mm:ss') }}</p>

        </div>
        <a-button type="primary" @click="message.info('功能暂未开放')">修改信息</a-button>
    </a-card>
</template>